<template>
    <div class="body">
        <div class="info">
            <mt-cell title="卡号:">
                <template v-if="!isEdit">
                    {{userInfo.bank_no}}
                </template>
                <input type="text" class="input" v-model="userInfo.bank_no" v-else>
            </mt-cell>
            <mt-cell title="开户行:">
                <template v-if="!isEdit">
                    {{userInfo.bank_address}}
                </template>
                <input type="text" class="input" v-model="userInfo.bank_address" v-else>
            </mt-cell>
            <mt-cell title="电话:">
                <template v-if="!isEdit">
                    {{userInfo.bank_phone}}
                </template>
                <input type="text" class="input" v-model="userInfo.bank_phone" v-else>
            </mt-cell>
            <mt-cell title="姓名:">
                <template v-if="!isEdit">
                    {{userInfo.bank_name}}
                </template>
                <input type="text" class="input" v-model="userInfo.bank_name" v-else>
            </mt-cell>
        </div>
        <section class="login_message">
            <mt-button class="btn" @click="edit" v-if="!isEdit">修改</mt-button>
            <mt-button class="btn" @click="submit" v-else>提交</mt-button>
        </section>
    </div>
</template>
<script>
import {EditStore} from '../api'
import {verUserInfo} from '../verify'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            userInfo:{},
            isEdit:false
        }
    },
    created(){
        this.userInfo = this.$store.getters.userInfo
    },
    methods:{
        edit(){
            this.isEdit = !this.isEdit
        },
        submit(){
            let data = this.userInfo;
            data.token=this.$store.getters.token
            if(!verUserInfo(data)) return;
            EditStore(data).then(res=>{
                if(res.code!==200){
                    Toast(res.msg)
                }else{
                    Toast(res.msg)
                    this.isEdit = !this.isEdit
                    this.$router.go(-1)
                }
            })
        }
    }
}
</script>
<style scoped>
        .body{
        background: #ddd;
        height: Calc(100vh - 3rem)
    }
    .body::before{
        display: table;
        content: "";
    }
    .info{
        width: 90%;
        margin: 1rem auto;
        border-radius: 10px;
        background: #fff;
    }
    .info>a:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .info>a:last-child{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .info::after{
        display: table;
        content: "";
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
</style>